<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Complex Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../STYLES/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../STYLES/themes/icon.css">
	<script type="text/javascript" src="../SCRIPTS/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../SCRIPTS/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function addTab(tabId, title, url){
			// 如果当前id的tab不存在则创建一个tab
			if($("#"+tabId).html()==null){
				var name = 'iframe_'+tabId;
				$('#tt').tabs('add',{
					title: title,
					closable: true,
					cache: false,
					// 注：使用iframe即可防止同一个页面出现js和css冲突的问题  
					content : '<iframe name="'+name+'"id="'+tabId+'"src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto" ></iframe>'
				});
			}
		}
	</script>
</head>
<body class="easyui-layout">
	<!-- header -->
	<div data-options="region:'north',border:false" style="height:62px;background:#D2E0F2;">
	<img src="../IMAGES/comlogo_sc.jpg" height="58px">
	</div>
	<!-- footer -->
	<div data-options="region:'south',border:false" style="height:28px;background:#D2E0F2;line-height:26px;text-align: center;">
	Travelzen &copy Copyright 2012
	</div>
	<!-- left -->
	<div data-options="region:'west',split:true" title="主菜单" style="width:280px;padding1:1px;overflow:hidden;">
		<div class="easyui-accordion" data-options="fit:true,border:false">
			<div title="监控系统" style="padding:10px;overflow:auto;">
				<ul>
					<li><a href="javascript:void(0)" onclick="addTab('tabId_loginInfo','用户管理','table.html');">用户管理</a></li>  
					<li><a href="javascript:void(0)" onclick="addTab('tabId_privilege','权限管理','test/two.jsp');">权限管理</a></li>  
				</ul>
			</div>
			<div title="菜单管理" style="padding:10px;overflow:auto;">
				test
			</div>
		</div>
		
	</div>
	<div data-options="region:'center'" title="功能区" style="overflow:hidden;">
		<div id="tt" class="easyui-tabs" data-options="fit:true,border:false">
			<div title="首页" style="padding:20px;overflow:hidden;"> 
				hello world!
			</div>
		</div>
	</div>
</body>
</html>